<template>
  <a-card>
    <mavon-editor
      ref="md"
      v-model="content"
      :codeStyle="markdown.codeStyle"
      :toolbars="markdown.toolbars"
      @save="save"
      @imgAdd="imgAdd"
      @imgDel="imgDel"
    />
  </a-card>
</template>
<script>
export default {
  name: 'editor',
  data() {
    return {
      content: `hello world`,
      markdown: {
        codeStyle: 'atom-one-dark',
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: false // 预览
        }
      }
    }
  },
  computed: {},
  methods: {
    save() {
      console.log(this.content)
    },
    // 绑定@imgAdd event
    imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append('image', $file)
      // upload img
      //   axios({
      //     url: 'server url',
      //     method: 'post',
      //     data: formdata,
      //     headers: { 'Content-Type': 'multipart/form-data' }
      //   }).then((url) => {
      //     // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
      //     // $vm指为mavonEditor实例，可以通过如下两种方式获取
      //     //通过引入对象获取: import {mavonEditor} from ... 等方式引入后，此时$vm即为mavonEditor
      //     //通过$refs获取: html声明ref : <mavon-editor ref=md ></mavon-editor>， 此时$vm为 this.$refs.md`
      //     $vm.$img2Url(pos, url)
      //   })
    },
    imgDel(pos, url) {
      //删除图片，并不是修改就会触发，仅支持工具栏操作
      console.log(pos)
      console.log(url)
    }
  }
}
</script>
